<template>
    <div>
        <div class="upload-item"
             v-for="(item,index) in localIds"
             :key="item+index"
             v-if="localIds.length>0">
            <img :src="item"
                 :preview="preview"
                 alt="">
            <span @click="removeImg(item.name,index)"
                  v-if="showUploadBtn"></span>
        </div>
        <div class="upload-item"
             v-if="localIds.length<limitNumber && showUploadBtn">
            <!-- <img src="@static/images/upload.png"
                 alt=""> -->
            <label for="file"
                   @click="chooseImage"></label>
        </div>
    </div>
</template>
<script>
export default {
    name: 'chooseImage',
    data () {
        return {
            localIds: [], // 图片上传回传的照片
            localIdsBackup: [], // 图片上传回传的照片备份
            problemImgs: [],
            preview: '' // 预览图片分组
        }
    },
    props: {
        imgList: { // 回显的图片
            default: () => []
        },
        limitNumber: { // 最多上传张数
            default: 10
        },
        showUploadBtn: { // 是否显示上传按钮和图片删除按钮
            default: true
        }
    },
    created () {
        this.localIds = JSON.parse(JSON.stringify(this.imgList))
        this.localIdsBackup = JSON.parse(JSON.stringify(this.localIds))
        this.preview = new Date().getTime() + new Date().getTime()
    },
    methods: {
        chooseImage () {
            let This = this
            wx.chooseImage({
                count: 9, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    This.localIds = This.localIds.concat(res.localIds) // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    if (This.localIds.length > 10) {
                        This.$vux.toast.text(`最多只能上传${This.limitNumber}图片`)
                        This.localIds = This.localIds.splice(0, 10)
                    }
                    This.localIdsBackup = JSON.parse(JSON.stringify(This.localIds))
                    This.problemImgs = []
                    This.syncUpload()
                }
            })
        },
        syncUpload () {
            if (!this.localIdsBackup.length) {
                this.$emit('setFormData', this.localIds, this.problemImgs, this.localIds.length)
                this.$nextTick(() => {
                    this.$previewRefresh()
                })
            } else {
                let This = this
                let localId = this.localIdsBackup.pop()
                wx.uploadImage({
                    localId: localId,
                    isShowProgressTips: 0, // 默认为1，显示进度提示
                    success: function (res) {
                        This.problemImgs.push(res.serverId)
                        This.syncUpload()
                    }
                })
            }
        },
        removeImg (name, index) {
            this.localIds.splice(index, 1)
            this.localIdsBackup = JSON.parse(JSON.stringify(this.localIds))
            this.problemImgs = []
            this.syncUpload()
        }
    }
}
</script>
<style>
.upload-item {
    position: relative;
}
.newinputlist {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
</style>
